<template>
	<div class="about">
		<h1 v-if="vueVersion == '2'">{{msg + vueVersion}}</h1>
		<h1 v-else>{{msg + vueVersion}}</h1>
		<ul>
			<li v-for="(lang, index) in list" :key="lang">{{index + '-' + lang}}</li>
		</ul>
		<ul>
			<li v-for="stu in studentList" :key="stu.no">{{`${stu.name}-${stu.no}`}}</li>
		</ul>

		<ul>
			<li v-for="n in 10" :key="n">{{n}}</li>
		</ul>

		<button @click="clickButton">点我</button>
		<input v-model="inputValue"/>
		<input @input="showInputValue"/>
	</div>
</template>

<script>
	export default {
		created() {
			console.log('created...')
		},
		data() {
			return {
				vueVersion: '3',
				msg: 'Im vue',
				list: ['Java', 'Python', 'Vue', 'React', 'Angular'],
				studentList: [{
					name: '张三',
					no: '1243'
				}, {
					name: '李四',
					no: '1255'
				}, {
					name: '王五',
					no: '243'
				}],
				clickCount: 0,
				inputValue: ''
			}
		},
		methods: {
			clickButton() {
				this.clickCount ++;
				this.inputValue = 'this.clickCount:' + this.clickCount;
				console.log('this.clickCount', this.clickCount)
				// this.$router.push({path: '/'})
			},
			showInputValue(val) {
				console.log('user input:', val.data)
			}
		},
		
	}
</script>

<style>


</style>
